<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
       <button class="layui-btn layuiadmin-btn-tags" data-type="add">添加</button> 
    </div>
    <div class="layui-card-body">
      <table id="LAY-app-content-tags" lay-filter="LAY-app-content-tags"></table>
      <script type="text/html" id="layuiadmin-app-cont-tagsbar">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'contlist', 'table'], function () {
    var $ = layui.$
      , admin = layui.admin
      , view = layui.view
      , table = layui.table
      , form = layui.form
      , token = layui.data('manage').token;
    //分类管理
    table.render({
      elem: '#LAY-app-content-tags'
      , url: '/api/menu/getAllList' //模拟接口
      , method: 'post'
      , headers: { token }
      , cols: [[

        { type: 'numbers', width: 80, title: '序号', align: 'center' }
        , { field: 'fullname', title: '菜单名称' }
        , { field: 'name', title: 'name', width: 120 }
        , { field: 'icon', title: 'icon', width: 150 }
        , { field: 'jump', title: 'jump', width: 150 }
        , { field: 'spread', title: 'spread', width: 120, align: 'center' }
        , { field: 'sort', title: '排序', width: 100, align: 'center' }
        , { title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#layuiadmin-app-cont-tagsbar' }
      ]]
    });

    //监听工具条
    table.on('tool(LAY-app-content-tags)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('确定删除此分类？', function (index) {
          obj.del();
          layer.close(index);
          admin.req({
            type: "POST",
            url: '/api/menu/del',
            data: { ids: data.id },
            dataType: "json",
            success: function (res) {
              layer.msg(res.msg);
            }
          });


        });
      } else if (obj.event === 'edit') {
        admin.popup({
          title: '编辑分类'
          , area: ['550px', '600px']
          , id: 'LAY-popup-content-tags'
          , success: function (layero, index) {
            view(this.id).render('menu/add', data).done(function () {
              form.render(null, 'layuiadmin-form-tags');

              //监听提交
              form.on('submit(layuiadmin-app-tags-submit)', function (data) {
                var field = data.field; //获取提交的字段

                //提交 Ajax 成功后，关闭当前弹层并重载表格
                admin.req({
                  type: "POST",
                  url: '/api/menu/add',
                  data: field,
                  dataType: "json",
                  success: function (res) {
                    layer.msg(res.msg);
                  }
                });
                table.reload('LAY-app-content-tags');

                layui.table.reload('LAY-app-content-tags'); //重载表格
                layer.close(index); //执行关闭 
              });
            });
          }
        });
      }
    });


    var active = {
      add: function () {
        admin.popup({
          title: '添加分类'
          , area: ['550px', '600px']
          , id: 'LAY-popup-content-tags'
          , success: function (layero, index) {
            view(this.id).render('menu/add').done(function () {
              form.render(null, 'layuiadmin-form-tags');

              //监听提交
              form.on('submit(layuiadmin-app-tags-submit)', function (data) {
                var field = data.field; //获取提交的字段

                //提交 Ajax 成功后，关闭当前弹层并重载表格
                admin.req({
                  type: "POST",
                  url: '/api/menu/add',
                  data: field,
                  dataType: "json",
                  success: function (res) {
                    layer.msg(res.msg);
                  }
                });
                table.reload('LAY-app-content-tags');

                layer.close(index); //执行关闭 
              });
            });
          }
        });
      }
    }
    $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>